<script setup lang="ts">
// import { showToast } from 'vant'

interface Iprops {
  tabList: {
    title: string
    name: string | number
  }[]
}

const props = withDefaults(defineProps<Iprops>(), {
  tabList: () => [],
})

const active = ref('')

const list = ref([])
const loading = ref(false)
const finished = ref(false)
const refreshing = ref(false)

const onLoad = () => {
  setTimeout(() => {
    if (refreshing.value) {
      list.value = []
      refreshing.value = false
    }

    for (let i = 0; i < 10; i++) {
      list.value.push(
        {
          seriesId: 'TFTS1234567890',
          name: '停水计划申请流程-张三-2025-01-14',
          time: '2025-01-14 9:30 至 2025-01-14 19:30',
          address: '悦来大道5号人行道通道',
          statusName: '处理中'
        }
      )
    }
    loading.value = false

    if (list.value.length >= 40) {
      finished.value = true
    }
  }, 1000)
}

const onRefresh = () => {
  // 清空列表数据
  finished.value = false

  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true
  onLoad()
}
</script>

<template>
  <div class="app_main_box">
    <van-tabs v-model:active="active">
      <van-tab title="全部" name=""></van-tab>
      <van-tab :title="tabItm.title" :name="tabItm.name" v-for="tabItm in props.tabList" :key="tabItm.name"></van-tab>
    </van-tabs>
    <van-pull-refresh class="list_box" v-model="refreshing" @refresh="onRefresh">
      <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" class="px-[16px]">
        <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
        <slot name="list" :list="list"></slot>
      </van-list>
    </van-pull-refresh>
    <van-back-top target=".list_box" right="5vw" bottom="7vh" />
  </div>
</template>

<style lang="scss" scoped>
.app_main_box {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.list_box {
  flex: 1;
  overflow-y: auto;
  margin: 0;
}
</style>
